@base-background-color: #eeeeee;
@base-color: #216598;
:root {
    // ====================================================== base ====================================================== //
    --background-color: @base-background-color;
    --color: @base-color;
    // ====================================================== 文本 ====================================================== //
    --text-color: var(--color);
    // ====================================================== 图标 ====================================================== //
    --icon-filter: hue-rotate(301deg) grayscale(0.37) brightness(1.51);
    // ====================================================== 面板 ====================================================== //
    --panel-title-background-color: #286090;
    --panel-title-color: #ffffff;
    --panel-icon-background-color: transparent;
    --panel-icon-filter: grayscale(1) brightness(0) invert(1);
    --panel-content-background-color: var(--background-color);
    --panel-content-color: var(--color);
    --panel-border-color: #204d74;
    // ====================================================== 按钮 ====================================================== //
    // 默认状态
    --button-background-color: #286090;
    --button-border-color: #204d74;
    --button-color: #ffffff;
    --button-icon-background-color: transparent;
    --button-icon-filter: grayscale(1) brightness(0) invert(1);
    // 禁用状态
    --button-disabled-background-color: #337ab7;
    --button-disabled-border-color: #2e6da4;
    --button-disabled-color: #ffffff;
    // ====================================================== 输入框 ====================================================== //
    // 默认状态
    --inputer-background-color: var(--background-color);
    --inputer-border-color: var(--color);
    --inputer-color: var(--color);
    --inputer-controls-icon-filter: var(--icon-filter);
    // 禁用状态
    --inputer-disabled-background-color: #cccccc;
    --inputer-disabled-border-color: #c3c3c3;
    --inputer-disabled-color: #888888;
    // 只读状态
    --inputer-readonly-background-color: #dddddd;
    --inputer-readonly-border-color: #c3c3c3;
    --inputer-readonly-color: var(--color);
    // ====================================================== 复选框 ====================================================== //
    // 默认状态
    --checker-background-color: var(--background-color);
    --checker-border-color: lighten(@base-color, 10%);
    --checker-color: lighten(@base-color, 10%);
    // 选中状态
    --checker-checked-background-color: lighten(@base-color, 10%);
    --checker-checked-border-color: var(--color);
    --checker-checked-color: var(--color);
    --checker-checked-label-color: #ffffff;
    // 禁用状态
    --checker-disabled-background-color: var(--inputer-disabled-background-color);
    --checker-disabled-border-color: var(--inputer-disabled-border-color);
    --checker-disabled-color: var(--inputer-disabled-color);
    --checker-disabled-label-color: var(--inputer-disabled-color);
    // 禁用状态（选中状态）
    --checker-disabled-checked-background-color: var(--inputer-disabled-color);
    --checker-disabled-checked-border-color: #bbbbbb;
    --checker-disabled-checked-color: #666666;
    --checker-disabled-checked-label-color: #666666;
    // 只读状态
    --checker-readonly-background-color: var(--inputer-readonly-background-color);
    --checker-readonly-border-color: var(--inputer-readonly-border-color);
    --checker-readonly-color: var(--inputer-readonly-border-color);
    --checker-readonly-label-color: var(--inputer-readonly-color);
    // 只读状态（选中状态）
    --checker-readonly-checked-background-color: lighten(@base-color, 20%);
    --checker-readonly-checked-border-color: lighten(@base-color, 10%);
    --checker-readonly-checked-color: lighten(@base-color, 10%);
    --checker-readonly-checked-label-color: var(--checker-checked-label-color);
}
// ====================================================== base ====================================================== //
body {
    background-color: var(--background-color);
    color: var(--color);
}
// ====================================================== 文本 ====================================================== //
.Ptext {
    color: var(--text-color);
}
// ====================================================== 图标 ====================================================== //
.Picon.image {
    filter: var(--icon-filter);
}
// ====================================================== 面板 ====================================================== //
.Ppanel {
    border-color: var(--panel-border-color);
    &>.title-bar {
        background-color: var(--panel-title-background-color);
        color: var(--panel-title-color);
        .title-wrapper {
            .Picon {
                &.image {
                    background-color: var(--panel-icon-background-color);
                    filter: var(--panel-icon-filter);
                }
                &.fa {
                    background-color: transparent;
                    color: var(--panel-title-color);
                }
            }
        }
    }
    &>.content-bar {
        background-color: var(--panel-content-background-color);
        color: var(--panel-content-color);
    }
}
// ====================================================== 按钮 ====================================================== //
.plugin {
    &.Pbutton {
        cursor: pointer;
        background-color: var(--button-background-color);
        border-color: var(--button-border-color);
        .Picon {
            &.image {
                background-color: var(--button-icon-background-color);
                filter: var(--button-icon-filter);
            }
            &.fa {
                background-color: transparent;
                color: var(--button-color);
            }
        }
        .Ptext {
            color: var(--button-color);
        }
        &.disabled {
            cursor: not-allowed;
            background-color: var(--button-disabled-background-color);
            border-color: var(--button-disabled-border-color);
            opacity: 0.65;
            .Picon {
                &.image {
                    opacity: 0.5;
                }
            }
            &:hover {
                opacity: 0.65;
            }
        }
        &:hover {
            opacity: 0.9;
        }
        &:active {
            opacity: 0.7;
        }
    }
}
// ====================================================== 输入框 ====================================================== //
.plugin {
    &.Pinput {
        cursor: text;
        background-color: var(--inputer-background-color);
        border-color: var(--inputer-border-color);
        .container {
            color: var(--inputer-color);
            font-size: var(--inputer-font-size);
            font-family: var(--font-family);
            &:hover {
                opacity: 0.8;
            }
        }
        &.disabled {
            cursor: not-allowed;
            background-color: var(--inputer-disabled-background-color);
            border-color: var(--inputer-disabled-border-color);
            color: var(--inputer-disabled-color);
            &:hover {
                opacity: 1;
            }
        }
        &.readonly {
            cursor: auto;
            background-color: var(--inputer-readonly-background-color);
            border-color: var(--inputer-readonly-border-color);
            color: var(--inputer-readonly-color);
            &:hover {
                opacity: 1;
            }
        }
    }
}
// ====================================================== 选择框 ====================================================== //
.plugin {
    &.Pselect {
        .inputer {
            cursor: pointer;
            background-color: var(--inputer-background-color);
            border-color: var(--inputer-border-color);
            color: var(--inputer-color);
            font-size: var(--inputer-font-size);
            font-family: var(--font-family);
            &:hover {
                opacity: 0.8;
            }
        }
        &.disabled {
            .inputer {
                cursor: not-allowed;
                background-color: var(--inputer-disabled-background-color);
                border-color: var(--inputer-disabled-border-color);
                color: var(--inputer-disabled-color);
                opacity: 1;
                &:hover {
                    opacity: 1;
                }
            }
        }
        &.readonly {
            .inputer {
                cursor: auto;
                background-color: var(--inputer-readonly-background-color);
                border-color: var(--inputer-readonly-border-color);
                color: var(--inputer-readonly-color);
                opacity: 1;
            }
        }
    }
}
// ====================================================== 复选框 ====================================================== //
.plugin {
    &.Pcheckbox {
        // 隐藏实际复选框
        .inputer {
            display: none;
        }
        .wrap:hover {
            opacity: 0.8;
        }
        // 框
        .inputer+label {
            cursor: pointer;
            background-color: var(--checker-background-color);
            border-color: var(--checker-border-color);
        }
        // 钩、圈
        .inputer+label::before {
            display: none;
        }
        // 字
        .inputer+label+label {
            cursor: pointer;
            color: var(--checker-color);
        }
        // 选中状态
        .inputer:checked {
            // 框
            &+label {
                background-color: var(--checker-checked-background-color);
                border-color: var(--checker-checked-border-color);
            }
            // 钩
            &.inputer_checkbox+label::before,
            &.inputer_checkradio+label::before {
                display: block;
                color: var(--checker-checked-label-color);
            }
            // 点
            &.inputer_radio+label::before {
                display: block;
                background-color: var(--checker-checked-label-color);
            }
            // 字
            &+label+label {
                color: var(--checker-checked-color);
            }
        }
        // 禁用状态
        &.disabled {
            .wrap:hover {
                opacity: 1;
            }
            .inputer {
                // 框
                &+label {
                    cursor: not-allowed;
                    background-color: var(--checker-disabled-background-color);
                    border-color: var(--checker-disabled-border-color);
                }
                // 钩
                &.inputer_checkbox+label::before,
                &.inputer_checkradio+label::before {
                    color: var(--checker-disabled-label-color);
                }
                // 点
                &.inputer_radio+label::before {
                    background-color: var(--checker-disabled-label-color);
                }
                // 字
                &+label+label {
                    cursor: not-allowed;
                    color: var(--checker-disabled-color);
                }
            }
            // 选中状态
            .inputer:checked {
                // 框
                &+label {
                    background-color: var(--checker-disabled-checked-background-color);
                    border-color: var(--checker-disabled-checked-border-color);
                }
                // 钩
                &.inputer_checkbox+label::before,
                &.inputer_checkradio+label::before {
                    color: var(--checker-disabled-checked-label-color);
                }
                // 点
                &.inputer_radio+label::before {
                    background-color: var(--checker-disabled-checked-label-color);
                }
                // 字
                &+label+label {
                    color: var(--checker-disabled-checked-color);
                }
            }
        }
        // 只读状态
        &.readonly {
            .wrap:hover {
                opacity: 1;
            }
            .inputer {
                // 框
                &+label {
                    cursor: auto;
                    background-color: var(--checker-readonly-background-color);
                    border-color: var(--checker-readonly-border-color);
                }
                // 钩
                &.inputer_checkbox+label::before,
                &.inputer_checkradio+label::before {
                    color: var(--checker-readonly-label-color);
                }
                // 点
                &.inputer_radio+label::before {
                    background-color: var(--checker-readonly-label-color);
                }
                // 字
                &+label+label {
                    cursor: auto;
                    color: var(--checker-readonly-color);
                }
            }
            // 选中状态
            .inputer:checked {
                // 框
                &+label {
                    background-color: var(--checker-readonly-checked-background-color);
                    border-color: var(--checker-readonly-checked-border-color);
                }
                // 钩
                &.inputer_checkbox+label::before,
                &.inputer_checkradio+label::before {
                    color: var(--checker-readonly-checked-label-color);
                }
                // 点
                &.inputer_radio+label::before {
                    background-color: var(--checker-readonly-checked-label-color);
                }
                // 字
                &+label+label {
                    color: var(--checker-readonly-checked-color);
                }
            }
        }
    }
}
// ====================================================== 控制按钮 ====================================================== //
.plugin {
    &>.controls {
        .Pbutton {
            background-color: transparent;
            .Picon.image {
                background-color: transparent;
                filter: var(--inputer-controls-icon-filter);
            }
            .Picon.fa {
                color: var(--inputer-border-color);
            }
        }
    }
}
.plugin.disabled {
    &>.controls {
        .Pbutton {
            .Picon.fa {
                color: var(--inputer-disabled-border-color);
            }
        }
    }
}
.plugin.readonly {
    &>.controls {
        .Pbutton {
            .Picon.fa {
                color: var(--inputer-readonly-border-color);
            }
        }
    }
}
// ====================================================== form ====================================================== //
:root {
    --form-background-color: var(--background-color);
    --form-border-color: var(--color);
    --form-color: var(--color);
    --form-title-background-color: #234567;
    --form-title-border-color: var(--form-border-color);
    --form-title-color: #ffffff;
    --form-title-icon-filter: grayscale(1) brightness(0) invert(1);
    --form-buttons-background-color: #e2e2e2;
    --form-buttons-border-color: #aaaaaa;
}
.plugin {
    &.Pform {
        &>form {
            border-color: var(--form-border-color);
            &>.form-title {
                background-color: var(--form-title-background-color);
                border-bottom-color: var(--form-title-border-color);
                &>.Picon {
                    &.image {
                        filter: var(--form-title-icon-filter);
                    }
                    &.fa {
                        color: var(--form-title-color);
                    }
                }
                &>.Ptext {
                    color: var(--form-title-color);
                }
            }
            &>.form-items {
                background-color: var(--form-background-color);
            }
            &>.form-buttons {
                background-color: var(--form-buttons-background-color);
                border-top-color: var(--form-buttons-border-color);
            }
        }
    }
}
